// 中间的列表
import React from 'react'
import classnames from 'classnames'

export default class MainList extends React.Component {
  state = {
    currentItem: {
      id: '',
      title: '',
    },
  }
  render() {
    // 从父组件获取任务列表数据
    const { currentItem } = this.state
    const { type } = this.props
    const list = this.props.list.filter((item) => {
      if (type === 'all') {
        // 全部任务
        return true
      } else if (type === 'active') {
        // 未完成任务
        return item.done === false
      } else if (type === 'completed') {
        // 已完成任务
        return item.done === true
      } else {
        // 其他情况
        return false
      }
    })
    const taskList = list.map((item) => (
      <li
        key={item.id}
        className={classnames({
          completed: item.done,
          editing: currentItem.id === item.id,
        })}
      >
        <div className="view" onDoubleClick={this.handleEdit.bind(this, item)}>
          <input
            className="toggle"
            type="checkbox"
            onChange={this.toggleItem.bind(this, item.id)}
            checked={item.done}
          />
          <label>{item.title}</label>
          {/* 删除按钮 */}
          <button
            onClick={this.delTodoById.bind(this, item.id)}
            className="destroy"
          ></button>
        </div>
        <input
          className="edit"
          onChange={this.handleTitle}
          value={currentItem.title}
          onBlur={this.handleEdited}
        />
      </li>
    ))
    // 动态计算全选的图标是否高亮
    const isAll = list.every((item) => item.done)
    return (
      <section className="main">
        <input
          onChange={this.toggleAll.bind(this, isAll)}
          id="toggle-all"
          checked={isAll}
          className="toggle-all"
          type="checkbox"
        />
        <label onClick={this.toggleAll.bind(this, isAll)} forhtml="toggle-all">
          Mark all as complete
        </label>
        <ul className="todo-list">{taskList}</ul>
      </section>
    )
  }

  // 完成编辑
  handleEdited = () => {
    // 把当前最新的数据传递给父组件进行编辑即可
    this.props.handleEdited(this.state.currentItem)
    // 取消编辑状态
    this.setState({
      currentItem: {
        id: '',
        title: '',
      },
    })
  }

  // 控制编辑内容的改变
  handleTitle = (e) => {
    this.setState((preState) => {
      return {
        currentItem: {
          ...preState.currentItem,
          title: e.target.value,
        },
      }
    })
  }

  // 进入编辑状态
  handleEdit = (item) => {
    // 记录当前要编辑的任务信息
    this.setState({
      currentItem: item,
    })
  }

  // 控制全部切换状态
  toggleAll = (isAll) => {
    console.log(isAll)
    // 通知父组件修改所有任务的状态
    this.props.toggleAll(isAll)
  }

  // 控制单个任务的切换
  toggleItem = (id) => {
    // 把需要修改状态的任务id传递到父组件
    this.props.toggleItem(id)
  }

  // 删除单个条目
  delTodoById = (id) => {
    // 把id传递到父组件
    this.props.delTodoById(id)
  }
}
